<template>
  <div class="glass-box">
    <draggable
      class="list-group"
      :class="[data.isColumn ? 'column' : '']"
      v-model="data.list"
      v-bind="data.dragOptions"
      @start="data.drag = true"
      @end="data.drag = false"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <AppIcon></AppIcon>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, useAttrs, useSlots, toRaw } from 'vue'
import draggable from 'vuedraggable'
import AppIcon from '../../AppIcon.vue'
const props = defineProps({
  appList: Array,
})
const message = props.appList ? props.appList : []
// console.log(message)
// debugger
const data = reactive({
  drag: false,
  list: message.map((item: any, index) => {
    return { ...item, order: index + 1, name: item }
  }),
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})
</script>

<style scoped>
.glass-box {
  display: inline-block;
  padding: 5px;
  border: 1px dashed;

  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
}

.row {
  display: inline-block;
}
.column {
  display: grid;
}
</style>
